<template>
    <div class="authorize-container">
      <div class="authorize-box">
        <div class="authorize-header">
          <h2>授权确认</h2>
        </div>
        
        <div class="client-info">
          <el-avatar :size="60" :src="clientInfo.logo" />
          <h3>{{ clientInfo.name }}</h3>
          <p>请求访问您的账号信息</p>
        </div>
        
        <div class="scope-list">
          <h4>将获取以下权限：</h4>
          <ul>
            <li v-for="scope in clientInfo.scope" :key="scope">
              <el-icon><check /></el-icon>
              {{ scopeDescriptions[scope] || scope }}
            </li>
          </ul>
        </div>
        
        <div class="authorize-actions">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="loading">同意授权</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { Check } from '@element-plus/icons-vue'
  import { getAuthorizeInfo, confirmAuthorize } from '@/api/auth'
  
  const route = useRoute()
  const router = useRouter()
  
  const loading = ref(false)
  const clientInfo = ref({
    name: '',
    logo: '',
    scope: []
  })
  
  const scopeDescriptions: Record<string, string> = {
    'profile': '基本信息（用户名、头像）',
    'email': '电子邮箱地址',
    'phone': '手机号码',
    'openid': '唯一身份标识'
  }
  
  onMounted(async () => {
    const clientId = route.query.client_id as string
    const response = await getAuthorizeInfo(clientId)
    clientInfo.value = response
  })
  
  const handleConfirm = async () => {
    try {
      loading.value = true
      const clientId = route.query.client_id as string
      await confirmAuthorize(clientId, clientInfo.value.scope)
      // 重定向回客户端
      window.location.href = route.query.redirect_uri as string
    } finally {
      loading.value = false
    }
  }
  
  const handleCancel = () => {
    // 取消授权，重定向回客户端
    window.location.href = `${route.query.redirect_uri}?error=access_denied`
  }
  </script>
  
  <style lang="scss" scoped>
  .authorize-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    
    .authorize-box {
      width: 500px;
      padding: 40px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      
      .authorize-header {
        text-align: center;
        margin-bottom: 30px;
        
        h2 {
          color: #1a73e8;
        }
      }
      
      .client-info {
        text-align: center;
        margin-bottom: 30px;
        
        h3 {
          margin: 10px 0;
        }
        
        p {
          color: #666;
        }
      }
      
      .scope-list {
        margin-bottom: 30px;
        
        h4 {
          margin-bottom: 15px;
          color: #333;
        }
        
        ul {
          list-style: none;
          padding: 0;
          
          li {
            padding: 8px 0;
            display: flex;
            align-items: center;
            
            .el-icon {
              color: #1a73e8;
              margin-right: 10px;
            }
          }
        }
      }
      
      .authorize-actions {
        display: flex;
        justify-content: space-between;
        
        .el-button {
          width: 48%;
        }
      }
    }
  }
  </style>